<template>
  <BasicModal v-bind="$attrs" @register="registerModal" width="60%" :title="getTitle">
    <BasicForm @register="registerForm" :style="getBoxWidth" class="!mx-auto" />

    <template #footer>
      <Spin :spinning="loading" :delay="200">
        <a-button @click="handleSubmit" type="primary">保存</a-button>
        <a-button @click="handleClose">取消</a-button>
      </Spin>
    </template>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref } from 'vue';

  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { Spin } from 'ant-design-vue';

  import { useMessage } from '/@/hooks/web/useMessage';
  import { UseModalInit } from '/@/components/ModelTable/src/hooks/useComFormModel';

  import { getCSSValue } from '/@/utils';
  import { cloneDeep } from 'lodash-es';

  export default defineComponent({
    name: 'FormModal',
    components: { Spin, BasicModal, BasicForm },
    props: {
      isCustom: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['success', 'register'],
    setup(_) {
      const loading = ref(false);
      const buttons = ref<any>([]);
      const { createMessage } = useMessage();
      const [registerForm, formActionType] = useForm({
        baseColProps: { span: 23 },
        showActionButtonGroup: false,
      });
      const { resetFields, setProps: setFormProps, validate } = formActionType;

      let formWidth = ref('');
      const [registerModal, { closeModal, changeLoading, setModalProps }] = useModalInner(
        async (data) => {
          await init(cloneDeep(data));
        },
      );

      async function init({ formDesignInfo, modelId, client }) {
        setModalProps({
          width: client === 1 ? '375px' : '60%',
        });
        const formConfig = {
          ...formDesignInfo,
        };
        formConfig.schemas = formDesignInfo.schemas[formDesignInfo.client];
        try {
          changeLoading(true);
          const modalInit = new UseModalInit(
            {
              btnData: { moduleId: '', dataModelId: modelId || '1', preview: true },
              formDesignInfo: formConfig,
            },
            formActionType,
          );
          const { padding, width } = await modalInit.initialize();
          formWidth.value = width || '';
          setFormProps({
            baseRowStyle: { padding },
          });
          resetFields();
        } catch (e) {
          throw e;
        } finally {
          changeLoading(false);
        }
      }

      const getTitle = computed(() => '预览');
      const getBoxWidth = computed(() => ({ width: getCSSValue(unref(formWidth), '100%') }));

      async function handleSubmit() {
        await validate();
        handleClose();
        createMessage.success('操作成功', 0.5);
      }

      async function handleClose() {
        closeModal();
      }
      return {
        getTitle,
        loading,
        buttons,
        getBoxWidth,
        registerModal,
        registerForm,
        handleSubmit,
        handleClose,
      };
    },
  });
</script>
